<template>
	<view class="main">
		<view class="team_main">
			<view>队内成员</view>
			<view class="TeamUserImgAndname">
				<TeamUserImgAndname v-for="item in TeamUserImgAndname" :name="item.name" ></TeamUserImgAndname>
			</view>
			<view class="horizon_line"></view>
			<view>队伍名称：</view>
			<view>时间：</view>
			<view>地点：</view>
			<ImgList></ImgList>
		</view>
		<view class="join">
			<image src="../../static/logo.png"></image>
			<view>我要加入</view>
		</view>
		<view class="discuss">
			<view class="discusstitle">公共讨论区</view>
			<Comments></Comments>
			<Reply></Reply>
		</view>
		
	</view>
</template>

<script>
	import TeamUserImgAndname from "@/components/TeamUserImgAndname.vue"
	import ImgList from "@/components/ImgList.vue"
	import Comments from "@/components/Comments.vue"
	import Reply from "@/components/Reply.vue"
	export default {
		data() {
			return {
				TeamUserImgAndname:[
					{
						name:"甲乙"
					},{
						name:"丙丁"
					}
				]
			}
		},
		components:{
			TeamUserImgAndname,
			ImgList,
			Comments,
			Reply
		},
		methods: {
			
		}
	}
</script>

<style>
.team_main{
	border-color: oldlace;
	margin: 10rpx;
	border-style: solid;
	border-radius: 50rpx;
	padding: 10rpx 50rpx 10rpx 50rpx ;
}
.team_user{
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-wrap: wrap;
}
.horizon_line{
	height: 3rpx;
	margin-top: 20rpx;
	background-color: #424242;
}
.TeamUserImgAndname{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.join{
	height: 100rpx;
	width: 500rpx;
	margin: auto;
	margin-top: -30rpx;
	background-color: #EDBF8B;
	display: flex;
	border-radius: 50rpx;
	justify-content: center;
	align-items: center;
}
.join image{
	width: 70rpx;
	height: 70rpx;
	margin-right: 20rpx;
}
.discuss{
	margin: 30rpx 30rpx 0 30rpx;
}
</style>
